<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>
</head>
<body>
    <table border="0" width="450" align="center" bgcolor="#999999"> 
        <tr>
            <td height="40">
                <font color="red" size="6">●</font>
                <font color="blue" size="6">●</font>
                <font color="green" size="6">●</font>
            </td>

        </tr>
        <tr>
            <td height="60">
                <table border="0" width="100%" bgcolor="#ff4500" cellspacing="2">
                    <tr>
                        <td bgcolor="#999999" height="56"></td>
                    </tr>
                </table>
            </td>
            
        </tr>
    </table>
    <table border="0" width="450" align="center" bgcolor="#999999" cellspacing="2"> 
        <tr bgcolor = "#7fffd4">
            <td height="80" width="25%" align="center">AC</td>
            <td height="80" width="25%" align="center">+/-</td>
            <td height="80" width="25%" align="center">%</td>
            <td height="80" width="25%" align="center">÷</td>
        </tr>
        <tr bgcolor = "#7fffd4">
            <td height="80" width="25%" align="center">7</td>
            <td height="80" width="25%" align="center">8</td>
            <td height="80" width="25%" align="center">9</td>
            <td height="80" width="25%" align="center">✖️</td>
        </tr>
        <tr bgcolor = "#7fffd4">
            <td height="80" width="25%" align="center">4</td>
            <td height="80" width="25%" align="center">5</td>
            <td height="80" width="25%" align="center">6</td>
            <td height="80" width="25%" align="center">-</td>
        </tr>
        <tr bgcolor = "#7fffd4">
            <td height="80" width="25%" align="center">1</td>
            <td height="80" width="25%" align="center">2</td>
            <td height="80" width="25%" align="center">3</td>
            <td height="80" width="25%" align="center">+</td>
        </tr>
        <tr bgcolor = "#7fffd4">
            <td height="80" width="25%" align="center">0</td>
            <td height="80" width="25%" align="center">保留</td>
            <td height="80" width="25%" align="center">.</td>
            <td height="80" width="25%" align="center">=</td>
        </tr>
    </table>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        .father{
            background-color: gray;
            width: 260px;
            height: 400px;
            margin: auto;
        }
        div.top{
            /* float: left; */
            height: 30px;
        }
        div.redCircle,.greenCircle, .blueCircle{
            width: 20px;
            height: 20px;
            border-radius: 10px;
            float: left;
            margin: 2px;
        }
        div.redCircle{
        
            background-color: red;
        }
        div.greenCircle{
            
            background-color: green;
        }
        div.blueCircle{
           
            background-color: blue;
        }
        div.second{
            background-color: white;
            height: 40px;
            margin: 2px;

        }
        div.number{
            background-color: white;
            float: left;
            width: 60px;
            height: 60px;
            text-align: center;
            border: solid 4px gray;
            margin: -2px;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="top">
            <div class="redCircle"></div>
            <div class="greenCircle"></div>
            <div class="blueCircle"></div>
        </div>
        <div class="second">
        </div>
        <div class="bottom">
            <div class="number">AC</div>
            <div class="number">+/-</div>
            <div class="number">%</div>
            <div class="number">÷</div>
            <div class="number">7</div>
            <div class="number">8</div>
            <div class="number">9</div>
            <div class="number">*</div>
            <div class="number">4</div>
            <div class="number">5</div>
            <div class="number">6</div>
            <div class="number">-</div>
            <div class="number">1</div>
            <div class="number">2</div>
            <div class="number">3</div>
            <div class="number">+</div>
            <div class="number">0</div>
            <div class="number">保留</div>
            <div class="number">.</div>
            <div class="number">=</div>
        </div>
    </div>
</body>
</html> -->

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在线计算器CSS+DIV实现</title>
    <style type="text/css">
        #outer {
            width: 450px;
            height: 540px;
            background-color: gray;
            margin: 0 auto;
            border-radius: 20px;    /* 设置最外层父窗口的圆角 */
        }
        #top {
            width: 200px;
            padding-left: 20px;     /* 让小圆点距离左边20像素 */
            height: 50px;
            margin: 0 auto;
            display: table-cell;    /* 以单元格方式处理DIV，便于实现垂直居中 */
            vertical-align: middle;  /* 让三个小圆点都垂直居中 */
        }
        .point {
            width: 20px;            /* 要实现圆形，必须是一个正方形  */
            height: 20px;
            float: left;
            margin-left: 10px;
            border-radius: 50%;     /* 设置小圆点的圆角半径为宽度的一半，这样可以实现一个圆 */
        }
        .bg-blue {
            background-color: dodgerblue;
        }
        .bg-green {
            background-color: darkgreen;
        }
        .bg-red {
            background-color: orangered;
        }
        #result {
            width: 97%;
            height: 50px;
            background-color: white;
            margin: 0 auto;
            border: solid 2px orangered;
        }
        #button {
            width: 99%;
            height: 420px;
            margin: 10px auto;
        }
        #button div {
            width: 24%;
            height: 80px;
            margin: 2px;
            background-color: #7fffd4;
            float: left;
            font-size: 30px;
            text-align: center;
            line-height: 80px;
            font-family: 微软雅黑;
        }
        #button div:hover {
            background-color: orangered;   /* 针对所有按钮实现鼠标悬停效果 */
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="top">
            <div class="point bg-red"></div>
            <div class="point bg-blue"></div>
            <div class="point bg-green"></div>
        </div>

        <div id="result"></div>

        <div id="button">
            <div>AC</div>
            <div>+/-</div>
            <div>%</div>
            <div>÷</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>*</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>-</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>+</div>
            <div>0</div>
            <div>保留</div>
            <div>.</div>
            <div>=</div>
        </div>
    </div>
</body>
</html>